import { Popup, Picker  ,ConfigProvider, Col} from '@ray-js/smart-ui';
import React ,{ useState }  from 'react';
import styles from './index.module.less';
import Strings from '@/i18n';
import { View, Text } from '@ray-js/ray';
import { getCapacitys, getDevId,isAllZeros,toTwoHex} from '@/utils';

type Props = {
    popShow: boolean,
    titleStr?: string,
    currentValue?: string,
    onConfirm?: (seleteTime:string) => void,
    onCancel?: () => void
    columns?: [ {values: string[]}]
};


export function PickerOilPopup( props:Props) {
   
    let defaultValue=props.currentValue==Strings.getLang("str_please_select")?"0":props.currentValue

   const [mValue, setMValue] = useState(defaultValue); 
   
    const onTimeInput = React.useCallback(event => { 
        console.log("event", event.detail);
        const { value, index } = event.detail;
        setMValue(value) }, []
        );

       let mColumns = props.columns ? props.columns:   [
        {
          values: getCapacitys(),
          style: { flex: 'none', color: '#75C6C0', width: '8px', display: 'flex', justifyContent: 'center' },
        },
      ]
      let  curIndex=mColumns[0].values.indexOf(defaultValue)
      if(curIndex==-1){
        curIndex=0
      }
     
    return (
            <Popup 
             position="bottom"
             round
             overlay
             customStyle={{ height: '40vh', display: 'flex', flexDirection: 'column' , marginBottom:"0px" }}
             show={props.popShow}  >
             <View style={{marginTop:"10px"}}> 
             <Col span="4"  ><Text className={styles.btn_cancel} onClick={props.onCancel}>{Strings.getLang("str_cancel")}</Text></Col>
             <Col span="16" customClass={styles.centerH}> <Text className={styles.pageContainer_titile} >{Strings.getLang("total_oils")}</Text></Col>
             <Col span="4"><Text  className={styles.btn_confirm} onClick={()=>{props.onConfirm(mValue)}}>  {Strings.getLang("str_confirm")}</Text></Col>
             </View>
             <ConfigProvider
                themeVars={{
                pickerOptionSelectedTextColor:"#75C6C0",
                fontWeightBold:"300"
             }}
      >
                <Picker
                    columns={mColumns}
                    defaultIndex={curIndex}
                    onChange={onTimeInput}
                    itemHeight={58}
                    showToolbar={false}
                    activeClass='activeClass'
                />
                {/* <View className={styles.unit} >{Strings.getLang("str_minute")}</View> */}
                </ConfigProvider>
            </Popup>
    );
}